<template>
    <div>
        <el-table
                :data="userList"
                style="width: 100%"
                height="660px">
            <el-table-column
                    align="center"
                    type="index"
                    label="序号"
                    width="100">
            </el-table-column>
            <el-table-column
                    label="注册时间"
                    width="300">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.createTime|timestampToTime }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="用户名"
                    >
                <template slot-scope="scope">
                    <span>{{ scope.row.userName }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="状态"
            >
                <template slot-scope="scope">
                    <span><el-tag :type="scope.row.dr == '0'? '' : 'danger'">{{ scope.row.dr == '0'? '正常' : '已删除' }}</el-tag></span>
                </template>
            </el-table-column>
            <el-table-column label="操作"
                             width="200">
                <template slot="header" slot-scope="scope">
                    <el-input
                            v-model="formInline.userName"
                            placeholder="输入关键字搜索"
                            @input="inputChange"/>
                </template>
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleEdit(scope.$index, scope.row)">
                        {{scope.row.dr == '0'? '删除' : '恢复'}}
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
    </div>
</template>

<script>
    import Pagination from '../components/Pagination'

    export default {
        name: "User",
        components: {
            Pagination
        },
        data() {
            return {
                userList: [],
                formInline: {
                    pageIndex: 1,
                    pageSize: 10,
                    userName: ''
                },
                pageparm: {
                    currentPage: 1,
                    pageSize: 10,
                    total: 0
                },
            }
        },
        created() {
            this.getData(this.formInline)
        },
        methods: {
            getData(param) {
                this.$axios.get("/api/user/getUsers", {
                    params: param
                })
                    .then(res => {
                        this.userList = res.data.data.resultList
                        this.pageparm.total = res.data.data.totalCount
                    }).catch(err => {
                    return Promise.reject(err);
                })
            },
            inputChange(val){
                this.formInline.userName = val
                this.formInline.pageIndex = 1
                this.pageparm.currentPage = 1
                this.getData(this.formInline)
            },
            handleEdit(index, row) {
                let user = {
                    id: row.id
                }
                if(row.dr == 0){
                    user.dr = 1
                }else{
                    user.dr = 0
                }
                this.$axios.post("/api/user/update", this.$qs.stringify(user))
                    .then(res=>{
                        if(res.data.status == 200){
                            this.$message.success(res.data.message)
                            this.getData(this.formInline)
                        }else{
                            this.$message.error(res.data.message)
                        }
                    })
                    .catch(err=>{
                        return Promise.reject(err);
                    })
            },
            // 分页插件事件
            callFather(parm) {
                this.formInline.pageIndex = parm.currentPage
                this.formInline.pageSize = parm.pageSize
                this.getData(this.formInline)
            }
            ,
        }
    }
</script>

<style scoped>

</style>
